<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>B&F</title>
    <link rel="stylesheet" href="./dis/css/slucky.css">
    <link rel="stylesheet" href="./dis/css/bug.css">
    <link rel="stylesheet" type="text/css" href="./dis/css/styles.css" />
    <link rel="stylesheet" type="text/css" href="./dis/css/component.css" />
</head>

<body>
    <style>
    .icon-box {
        text-align: center;
    }
    
    .yu-icon>img {
        margin-top: 24px;
        width: 200px;
    }
    
    .loading>img {
        margin-top: 56px;
    }
    
    .spinner {
        width: 72px;
        height: 72px;
        position: relative;
        margin: 100px auto;
    }
    
    .double-bounce1,
    .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #67CF22;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-animation: bounce 2.0s infinite ease-in-out;
        animation: bounce 2.0s infinite ease-in-out;
    }
    
    .double-bounce2 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    
    @-webkit-keyframes bounce {
        0%,
        100% {
            -webkit-transform: scale(0.0)
        }
        50% {
            -webkit-transform: scale(1.0)
        }
    }
    
    @keyframes bounce {
        0%,
        100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }
        50% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }
    </style>
    <div class="d-n">
        <svg>
            <symbol id="icon-test" viewBox="0 0 16 16">
                <title>test</title>
                <path class="path1" d="M16 9.226l-8-6.21-8 6.21v-2.532l8-6.21 8 6.21zM14 9v6h-4v-4h-4v4h-4v-6l6-4.5z"></path>
            </symbol>
        </svg>
    </div>
    <progress max="100" value="" class="progress-loading" id="progress_loading"></progress>
    <script>
    (function() {
        var $ = function(id) {
            return document.getElementById(id)
        }
        var progress = $('progress_loading');
        var _timer;

        autoAdd(80, 100);
        /**
         * 加载进度模拟
         * @param  {[int]}   tar      [目标值]
         * @param  {[int]}   delay    [时间间隔]
         * @param  {Function} callback [description]
         * @return {[type]}            [description]
         */
        function autoAdd(tar, delay, callback) {
            clearInterval(_timer);
            // 随机量偏移值
            _interval = Math.ceil(Math.random() * 5);
            var bool = Math.floor(Math.random() * 2);
            var tarOffset = Math.ceil(Math.random() * 10);
            if (bool) {
                tar += tarOffset;
            } else {
                tar -= tarOffset;
            }
            if (tar > 100) {
                tar = 100;
            }

            _timer = setInterval(function() {
                if (progress.value < tar) {
                    progress.value += _interval;
                } else {
                    progress.value = tar;
                    clearInterval(_timer);
                    callback && callback();
                }
            }, delay);
        }

        window.onload = function() {
            console.log("onload")
            autoAdd(100, 10, function() {
                var _disTimer;
                clearTimeout(_disTimer);
                _disTimer = setTimeout(function() {
                    progress.style.display = "none";
                }, 1000);
            });
        }
    })();
    </script>
    <div id="root">
        <div class="icon-box">
            <div class="yu-icon">
                <div class="spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
                <p>Welcome</p>
            </div>
        </div>
    </div>
    <script src="./dis/plug/TweenLite.min.js"></script>
    <script src="./dis/plug/EasePack.min.js"></script>
    <script src="./dis/plug/rAF.js"></script>
    <script src="./dis/react/bundle.min.js"></script>
    <script src="./dis/plug/demo-1.js"></script>
</body>

</html>
